<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <!-- <a-form-item label="Activity zone">
          <a-select v-model="model.region" placeholder="please select your zone">
            <a-select-option value="shanghai">Zone one</a-select-option>xhdjDataReview:select
            <a-select-option value="beijing">Zone two</a-select-option>xhdjDataReview:select
          </a-select>
        </a-form-item> -->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="城市服务商">
          <serveSelect @selectClick="selectClick" :value="model.agencyCode"></serveSelect>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coachType" label="提成模式">
          <a-select
            v-model="model.patternType"
            style="width: 120px"
            :options="patternTypeOptions"
            allowClear
            placeholder="请选择"
          />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coachName" label="技师艺名">
          <a-input placeholder="请输入名称" v-model="model.coachName" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realName" label="真实姓名">
          <a-input placeholder="请输入真实姓名" v-model="model.realName" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mobile" label="手机号码">
          <a-input placeholder="请输入手机" v-model="model.mobile" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="age" label="技师年龄">
          <a-input-number v-model="model.age" :min="0" :precision="0" :defaultValue="0" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="virNumber" label="虚拟订单量">
          <a-input-number v-model="model.virOrderNum" :min="0" :precision="0" :defaultValue="0" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="virNumber" label="虚拟收藏人数">
          <a-input-number v-model="model.virNumber" :min="0" :precision="0" :defaultValue="0" />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serviceStatus" label="虚拟服务状态">
          <a-select
            v-model="model.serviceStatus"
            style="width: 120px"
            :options="xunlizhuantai"
            allowClear
            placeholder="请选择"
          />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="状态">
          <a-switch v-model="statusFlag" @change="statusClick()" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coachType" label="技师等级">
          <a-select v-model="model.coachType" style="width: 120px" :options="options" allowClear placeholder="请选择" />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coachCertificateName" label="专业技能">
          <!-- <a-select
            v-model="model.coachCertificateName"
            style="width: 120px"
            :options="options"
            allowClear
            placeholder="请选择"
          /> -->
          <serveSelectyskill
            @selectClick="serveSelectyskillClick"
            :value="model.coachCertificateName"
          ></serveSelectyskill>
        </a-form-model-item>

        <!-- <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex" label="性别">
          <a-select v-model="model.sex" placeholder="请选择分销商">
            <a-select-option value="1">福州市</a-select-option>
            <a-select-option value="2">南昌市</a-select-option>
          </a-select>
        </a-form-model-item> -->

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex" label="性别">
          <a-radio-group name="sex" v-model="model.sex" defaultValue="2">
            <a-radio value="2">女</a-radio>
            <a-radio value="1">男</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="province" label="省">
          <a-select
            v-model="model.province"
            style="width: 100%"
            :options="formatData(this.allList)"
            @change="cityClick"
            placeholder="请选择"
          />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="city" label="市">
          <a-select
            v-model="model.city"
            style="width: 100%"
            :options="formatData(this.citys)"
            @change="citysClicks"
            placeholder="请选择"
          />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="area" label="区">
          <a-select
            v-model="model.area"
            style="width: 100%"
            :options="formatData(this.cityss)"
            placeholder="请选择"
            @change="clicks(model.area)"
          />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address" label="地址">
          <a-input placeholder="请输入地址" v-model="model.address" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="briefIntroduction" label="简介">
          <a-textarea v-model="model.individualResume" placeholder="简介" :rows="4" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="licenseName" label="店铺名">
          <a-input placeholder="请输入店铺名" v-model="model.licenseName" />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="license" label="营业执照">
          <div style="display: flex">
            <j-image-upload
              class="avatar-uploader"
              text="营业执照"
              :type="licenseChecked ? '1' : '0'"
              v-model="model.license"
            ></j-image-upload>
<!--            <a-switch v-model:checked="licenseChecked" checked-children="关闭水印" un-checked-children="开启水印" />-->
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="masterLicense" label="营业执照原件">
          <div style="display: flex">
            <j-image-upload class="avatar-uploader" text="营业执照原件" v-model="model.masterLicense"></j-image-upload>
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coachCertificate" label="技师证">
          <div style="display: flex">
            <j-image-upload
              class="avatar-uploader"
              text="技师证"
              :type="coachCertificateChecked ? '1' : '0'"
              v-model="model.coachCertificate"
            ></j-image-upload>
<!--            <a-switch-->
<!--              v-model:checked="coachCertificateChecked"-->
<!--              checked-children="关闭水印"-->
<!--              un-checked-children="开启水印"-->
<!--            />-->
          </div>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="masterCoachCertificate"
          label="技师证原件"
        >
          <div style="display: flex">
            <j-image-upload
              class="avatar-uploader"
              text="技师证原件"
              v-model="model.masterCoachCertificate"
            ></j-image-upload>
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="healthCertificate" label="健康证">
          <div style="display: flex">
            <j-image-upload
              class="avatar-uploader"
              text="健康证"
              :type="healthCertificateChecked ? '1' : '0'"
              v-model="model.healthCertificate"
            ></j-image-upload>
<!--            <a-switch-->
<!--              v-model:checked="healthCertificateChecked"-->
<!--              checked-children="关闭水印"-->
<!--              un-checked-children="开启水印"-->
<!--            />-->
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workImg" label="工作照">
          <j-image-upload class="avatar-uploader" text="工作照" v-model="model.workImg"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selfImg" label="个人照片">
          <j-image-upload
            class="avatar-uploader"
            text="个人照片"
            :max="6"
            isMultiple
            v-model="model.selfImg"
          ></j-image-upload>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardImg" label="身份证正面">
          <j-image-upload class="avatar-uploader" text="身份证正面" v-model="model.idCardImg" :max="1"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardReverseImg" label="身份证背面">
          <j-image-upload
            class="avatar-uploader"
            text="身份证背面"
            v-model="model.idCardReverseImg"
            :max="1"
          ></j-image-upload>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardRaiseImg" label="手持身份证">
          <j-image-upload
            class="avatar-uploader"
            text="手持身份证"
            v-model="model.idCardRaiseImg"
            :max="1"
          ></j-image-upload>
        </a-form-model-item>
<!--        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="video" label="视频">-->
<!--          <a-upload :multiple="true" :action="uploadAction" :headers="tokenHeader" @change="handleChange">-->
<!--            <a-button>-->
<!--              <upload-outlined></upload-outlined>-->
<!--              上传视频-->
<!--            </a-button>-->
<!--          </a-upload>-->
<!--        </a-form-model-item>-->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recommend" label="是否是推荐技师">
          <a-radio-group name="recommend" v-model="model.recommend" defaultValue="0">
            <a-radio value="0">否</a-radio>
            <a-radio value="1">是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCode" label="身份证号">
          <a-input placeholder="请输入身份证号" v-model="model.idCode" />
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="备注">
          <a-input placeholder="选填" v-model="model.remark" />
        </a-form-model-item>

        <!--    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fare" label="车费">
            <a-input-number v-model="model.fare" disabled />
          </a-form-model-item> -->
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import Area from '@/components/_util/Area'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { mapState } from 'vuex'
import serveSelect from '@/components/serveSelecty.vue'
import serveSelectyskill from '@/components/serveSelectyskill.vue'
import serveSelectyxuxizhuantai from '@/components/serveSelectyxuxizhuantai.vue'

// 电话号码校验
let principalPhoneJ = async (rule, value) => {
  if (new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/).test(value)) {
    return Promise.resolve()
  } else {
    return Promise.reject('您的手机号码格式不正确!')
  }
}
// 身份证校验
let validateIdCard = async (rule, value) => {
  if (new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
    return Promise.resolve()
  } else {
    return Promise.reject('您的身份证号码格式不正确!')
  }
}
export default {
  name: 'XhdjCoachInfo',
  mixins: [JeecgListMixin],
  components: {
    serveSelect,
    serveSelectyskill,
    serveSelectyxuxizhuantai
  },
  data () {
    return {
      title: '操作',
      visible: false,
      model: {
        sex: '2'
      },
      licenseChecked: false,
      healthCertificateChecked: false,
      coachCertificateChecked: false,
      statusFlag: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      options: [
        {
          value: '1',
          label: '初级'
        },
        {
          value: '2',
          label: '中级'
        },
        {
          value: '3',
          label: '高级'
        }
      ],
      xunlizhuantai: [
        {
          value: '0',
          label: '无'
        },
        {
          value: '1',
          label: '服务中'
        }
      ],
      patternTypeOptions: [
        {
          value: '0',
          label: '系统默认'
        },
        {
          value: '1',
          label: '提成方案A'
        },
        {
          value: '2',
          label: '提成方案B'
        },
        {
          value: '3',
          label: '提成方案C'
        }
      ],
      skillList: [],
      confirmLoading: false,
      validatorRules: {
        mobile: [{ required: false, validator: principalPhoneJ, trigger: 'blur' }],
        idCode: [{ required: false, validator: validateIdCard, trigger: 'blur' }],
        province: [{ required: false, message: '请选择省', trigger: 'change' }],
        city: [{ required: false, message: '请选择市', trigger: 'change' }],
        area: [{ required: false, message: '请选择区', trigger: 'change' }],
        realName: [{ required: false, message: '请输入真实姓名', trigger: 'change' }],
        coachName: [{ required: false, message: '请输入昵称', trigger: 'change' }],
        // license: [{ required: false, message: '请上传证件照', trigger: 'change' }],
        workImg: [{ required: false, message: '请上传工作照', trigger: 'change' }],
        selfImg: [{ required: false, message: '请上传工个人照', trigger: 'change' }],
        // healthCertificate: [{ required: false, message: '请上传健康证', trigger: 'change' }],
        // coachCertificate: [{ required: false, message: '请上传技师证', trigger: 'change' }],
        coachCertificateName: [{ required: false, message: '请输入技师证名称', trigger: 'change' }],
        masterCoachCertificate: [{ required: false, message: '请输入店铺名', trigger: 'change' }],
        licenseName: [{ required: false, message: '请上传营业执照原件', trigger: 'change' }],
        masterLicense: [{ required: false, message: '请上传技师证原件', trigger: 'change' }],
        patternType: [{ required: false, message: '请选择提成模式', trigger: 'change' }]
      },
      url: {
        add: '/xhdjCoachInfo/add',
        edit: '/xhdjCoachInfo/edit',
        upload: '/sys/oss/file/upload',
        select: '/xhdjServerCoachLink/list'
      },
      all: [], // 地址信息
      allList: [], // 省份数据
      citys: [],
      cityss: []
    }
  },
  computed: {
    ...mapState({
      agencyCode: state => state.user.agencyCode
    })
  },
  created () {
    this.all = new Area().all
    this.allList = this.all.filter(res => res.index == 1)
  },
  methods: {
    uploadAction () {
      return window._CONFIG['domianURL'] + this.url.upload
    },
    add () {
      //初始化默认值
      this.edit({})
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.citys = this.all.filter(res => res.pid == this.model.province)
      this.cityss = this.all.filter(res => res.pid == this.model.city)
      this.statusFlag = this.isAdminAndstatus(this.model.status)
      if (this.model.recommend != undefined) {
        this.model.recommend = this.model.recommend.toString()
      }
      if (this.model.coachType) {
        this.model.coachType = this.model.coachType.toString()
      }
      // this.model.sex = String(this.model.sex)
      this.visible = true
    },
    // 状态
    statusClick () {
      if (this.statusFlag) {
        this.model.status = 1
      } else {
        this.model.status = 0
      }
    },
    close () {
      this.$emit('close')
      this.visible = false
      this.statusFlag = false
      this.$refs.form.clearValidate()
    },
    handleChange ({ fileList }) {
      if (fileList && fileList.length > 0 && fileList[0].response) {
        this.model.video = fileList[0].response.result.url
      }
    },
    // 编辑代理和状态
    isAdminAndstatus (value) {
      if (value) {
        return true
      } else {
        return false
      }
    },
    // 下拉框格式转换
    formatData (array) {
      var arr = []
      arr = array.forEach(res => {
        res.value = res.id
        res.label = res.text
      })
      return array
    },
    cityClick () {
      this.model.area = null
      this.model.city = null
      this.citys = this.all.filter(res => res.pid == this.model.province)
    },
    citysClicks () {
      this.model.area = null
      this.cityss = this.all.filter(res => res.pid == this.model.city)
    },
    clicks (value) {
      this.$forceUpdate()
    },
    handleOk () {
      ;``
      const that = this
      // this.model.agencyCode = this.agencyCode
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.close()
    },
    selectClick (value) {
      console.log(12346464, value)
      this.model.agencyCode = value
      console.log('数据源', this.model)
      this.text = value
    },
    serveSelectyskillClick (value) {
      this.model.coachCertificateName = value
    },
    serveSeleserviceStatus (value) {
      this.model.serviceStatus = value
    }
  }
}
</script>

<style lang="less" scoped></style>
